<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用Layui</title>
    <link rel="stylesheet" href="css/layui.css">
</head>
<body>

<form class="layui-form" action="">
    <div class="layui-form-item">
        <!--<label class="layui-form-label">省</label>-->
        <!--<div class="layui-input-block">-->
            <!--<select name="province" lay-verify="required" id="province" lay-filter="province">-->

                <!--<option value="">请选择省</option>-->
            <!--</select>-->
        <!--</div>-->
    <!--</div>-->
    <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">市</label>-->
        <!--<div class="layui-input-block">-->
            <!--<select name="city" lay-verify="required" id="city" lay-filter="city">-->

                <!--<option value="">请选择市</option>-->
            <!--</select>-->
        <!--</div>-->
    <!--</div>-->
    <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">区</label>-->
        <!--<div class="layui-input-block">-->
            <!--<select name="district" lay-verify="required" id="district" lay-filter="district">-->

                <!--<option value="">请选择县/区</option>-->
            <!--</select>-->
        <!--</div>-->
    <!--</div>-->

    <fieldset class="layui-elem-field layui-field-title">
        <legend>联动查询</legend>

    </fieldset>

    <div class="layui-form-item">
        <label class="layui-form-label">收货地址</label>
        <div class="layui-input-inline">
            <select name="province" lay-verify="required" id="province" lay-filter="province">

                <option value="">请选择省</option>
            </select>
            <!--<div class="layui-unselect layui-form-select">-->
                <!--<div class="layui-select-title"><input type="text" placeholder="请选择省" value="浙江省" readonly=""-->
                                                       <!--class="layui-input layui-unselect"><i class="layui-edge"></i>-->
                <!--</div>-->
                <!--<ul class="layui-anim layui-anim-upbit">-->
                    <!--<li lay-value="浙江" class="">浙江省</li>-->
                    <!--<li lay-value="你的工号" class="layui-this">江西省</li>-->
                    <!--<li lay-value="你最喜欢的老师">福建省</li>-->
                <!--</ul>-->
            <!--</div>-->
        </div>
        <div class="layui-input-inline">
            <select name="city" lay-verify="required" id="city" lay-filter="city">

                <option value="">请选择市</option>
            </select>
            <!--<div class="layui-unselect layui-form-select">-->
                <!--<div class="layui-select-title"><input type="text" placeholder="请选择市" value="" readonly=""-->
                                                       <!--class="layui-input layui-unselect"><i class="layui-edge"></i>-->
                <!--</div>-->
                <!--<ul class="layui-anim layui-anim-upbit">-->
                    <!--<li lay-value="杭州" class="">杭州</li>-->
                    <!--<li lay-value="宁波" class="layui-this">宁波</li>-->
                    <!--<li lay-value="温州">温州</li>-->
                    <!--<li lay-value="温州">台州</li>-->
                    <!--<li lay-value="温州">绍兴</li>-->
                <!--</ul>-->
            <!--</div>-->
        </div>
        <div class="layui-input-inline">
            <select name="district" lay-verify="required" id="district" lay-filter="district">

                <option value="">请选择县/区</option>
            </select>
            <!--<div class="layui-unselect layui-form-select">-->
                <!--<div class="layui-select-title"><input type="text" placeholder="请选择县/区" value="" readonly=""-->
                                                       <!--class="layui-input layui-unselect"><i class="layui-edge"></i>-->
                <!--</div>-->
                <!--<ul class="layui-anim layui-anim-upbit">-->
                    <!--<li lay-value="西湖区" class="">西湖区</li>-->
                    <!--<li lay-value="余杭区" class="layui-this">余杭区</li>-->
                    <!--<li lay-value="拱墅区">临安市</li>-->
                <!--</ul>-->
            <!--</div>-->
        </div>
    </div>
</form>

<script src="layui.js"></script>

<script src="lay/dest/layui.all.js"></script>

<script>

    layui.use(['jquery', 'form'], function () {
        var $ = layui.jquery
                , form = layui.form();

        $.ajax({
            type: 'GET',
            url: "http://localhost:8080/Area/province",
            dataType: 'json',
            success: function (data) {
                console.log(data)
                var obj = document.getElementById('province');
//                obj.options.length = 0;
                for (var o in data) {
                    obj.options.add(new Option(data[o].areaProvince, data[o].areaId)); //这个兼容IE与firefox
                }
                form.render();
            },
            error: function (xhr) {
                layer.msg('error');
            }
        });
//        $.ajax({
//            type: 'GET',
//            url: "http://localhost:8080/Area/province/" + $('#province') .val(),
//            dataType: 'json',
//            success: function (data) {
//                console.log(data)
//                var obj = document.getElementById('city');
//                obj.options.length = 0;
//                for (var o in data) {
//                    obj.options.add(new Option(data[o].areaCitytype, data[o].areaId)); //这个兼容IE与firefox
//                }
//                var obj = document.getElementById('district');
//                obj.options.length = 0;
//                obj.options.add(new Option("", "")); //这个兼容IE与firefox
//                form.render();
//            },
//            error: function (xhr) {
//                layer.msg('error');
//            }
//        });
//
//        $.ajax({
//            type: 'GET',
//            url: "http://localhost:8080/Area/province/" + $('#city') .val(),
//            dataType: 'json',
//            success: function (data) {
//                console.log(data)
//                var obj = document.getElementById('district');
//                obj.options.length = 0;
//                for (var o in data) {
//                    obj.options.add(new Option(data[o].areaCity, data[o].areaId)); //这个兼容IE与firefox
//                }
//                form.render();
//            },
//            error: function (xhr) {
//                layer.msg('error');
//            }
//        });


        form.on('select(province)', function (data) {
            console.log(data.value); //得到被选中的值
            $.ajax({
                type: 'GET',
                url: "http://localhost:8080/Area/province/" + data.value,
                dataType: 'json',
                success: function (data) {
                    console.log(data)
                    var obj = document.getElementById('city');
                    obj.options.length = 0;
                    obj.options.add(new Option("", ""));
                    for (var o in data) {
                        obj.options.add(new Option(data[o].areaCitytype, data[o].areaId)); //这个兼容IE与firefox
                    }
                    var obj = document.getElementById('district');
                    obj.options.length = 0;
                    obj.options.add(new Option("", "")); //这个兼容IE与firefox
                    form.render();
                },
                error: function (xhr) {
                    layer.msg('error');
                }
            });
        });

        form.on('select(city)', function (data) {
            console.log(data.value); //得到被选中的值
            $.ajax({
                type: 'GET',
                url: "http://localhost:8080/Area/province/" + data.value,
                dataType: 'json',
                success: function (data) {
                    console.log(data)
                    var obj = document.getElementById('district');
                    obj.options.length = 0;
                    obj.options.add(new Option("", ""));
                    for (var o in data) {
                        obj.options.add(new Option(data[o].areaCity, data[o].areaId)); //这个兼容IE与firefox
                    }
                    form.render();
                },
                error: function (xhr) {
                    layer.msg('error');
                }
            });
        });
    });


</script>

</body>
</html>